<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>編輯關於我</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>

<body>
	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container neck-in">
						<div class="grid_12 neck-in">
                            <div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li>
									<a href="aboutme?id=${loginMember.memberNO}" class="loginImg">
										<img src="${loginMember.photoPath}">
									</a>
									<ul class="loginDropdown hide">
										<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
										<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>		
										<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
										<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>										
										<li><a href="logout">登出</a></li>
									</ul>
								</li>							
							</ul>
                        </div>
					</div>
				</div>
			</div>
			
			<div class="zoneAll clearfix">
				<div class="zone1 clearfix">
                
                    <div class="personalinformationimg clearfix">
                        <img src="${member.photoPath}">
                    </div>
                    <div class="personalinformationp">
                        <p>${member.name}</p>
                        <p>${member.job}</p>
                        <p>
                            <a href="memberFans?id=${member.memberNO}">
                            	<span class="fansCount" id="fansCount">${member.fansCount}</span>粉絲
                            </a>
                            <a href="memberFollow?id=${member.memberNO}">
                            	${member.followCount}關注
                            </a>
                        </p>
                    </div>

                    <ul class="leftnav">
                        <li class="current">
                            <a href="aboutme?id=${member.memberNO}">
                                <img src="images/aboutme.png">關於我</a>
                        </li>
                        <li>
                            <a href="memberCourse?id=${member.memberNO}">
                                <img alt="" src="images/mycreation.png">我創作</a>
                        </li>
                        <li>
                            <a href="collectCourse?id=${member.memberNO}">
                                <img alt="" src="images/mystar.png">我收藏</a>
                        </li>
                        <li>
                            <a href="memberCard?id=${member.memberNO}">
                                <img alt="" src="images/xmas.png">耶誕卡片</a>
                        </li>
                        <!-- 
                        <li>
                            <a href="membernewswall.html">
                                <img alt="" src="images/mynew.png">動態牆</a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img alt="" src="images/myactivity.png">活動</a>
                        </li> 
                        -->
                    </ul>
                </div>
				<div class="memberRwdnav clearfix">
                    <nav class="primary">
                        <ul class="rightnav">
                            <li>
                                <a href="aboutme?id=${member.memberNO}">
                                    <img src="images/aboutme.png">關於我</a>
                            </li>
                            <li>
                                <a href="memberCourse?id=${member.memberNO}">
                                    <img src="images/mycreation.png">我創作</a>
                            </li>
                            <li>
                                <a href="collectCourse?id=${member.memberNO}">
                                    <img src="images/mystar.png">我收藏</a>
                            </li>                          
                            <li>
                                <a href="memberCard?id=${member.memberNO}">
                                    <img alt="" src="images/mystar.png">耶誕卡片</a>
                            </li> 
                            <!-- 
		                        <li>
		                            <a href="membernewswall.html">
		                                <img alt="" src="images/mynew.png">動態牆</a>
		                        </li>
		                        <li>
		                            <a href="javascript:;">
		                                <img alt="" src="images/myactivity.png">活動</a>
		                        </li> 
		                     -->
                        </ul>
                    </nav>
                    <ul class="navbarright">
                    	<li>
                        	<button type="button" class="addTopButton send">完成編輯</button>
                 		</li>
                    </ul>
                </div>
				<div class="zone2 clearfix">
					<div class="membernavhide">
						<div class="title">
                                <img alt="關於我" src="images/aboutmebig.png">
                                <span>關於我</span>
                        </div>
                        <div class="navbar">
                        <ul class="navbarright">
                            <li>
                            	<button type="button" class="addTopButton send">完成編輯</button>
                            </li>
                        </ul>
                        </div>
                	</div>
                	
					<div class="editmemberaboutme clearfix">
						<form id="sendForm" method="post" action="modiAboutme" enctype="multipart/form-data">
							<div class="aboutmeleftnav clearfix">
								<div class="editaboutmeleftnavimg clearfix">
									<div class="uploadimgArea">
										<!-- 這段會設透明度0 -->
										<input type="file" name="photo" id="photo" class="uploadimgfile" value="上傳圖片">
										<div class="uploadimgs2">
											<img src="images/uploadimg.png" id="uploadimg" class="uploadimg" style="display:${member.photoName==''?'inline':'none'}">
											<img src="images/reuploadimg.png" id="reuploadimg" class="reuploadimg" style="display:${member.photoName==''?'none':'inline'}">
											<img src="${member.photoPath}" style="display:${member.photoName==''?'none':'inline'}" id="preview">
										</div>
									</div>
								</div><!-- editaboutmeleftnavimg -->
								
								
	                        	<div class="aboutmelefttop clearfix">
				                     <div class="editaboutmeleftnavp clearfix">
				                    	<ul>
											<li><input type="text" class="txt" name="name" placeholder="名稱" maxlength="10" value="${member.name}"></li>
											<li><p class="membernewscareer"><input type="text" class="txt" name="job" placeholder="職業" maxlength="30" value="${member.job}"></p></li>
										</ul>
				                    </div><!-- aboutmeleftnavp -->
			                    </div><!-- aboutmelefttop -->
			                    
			                    
			                    <div class="aboutmeleftnavtwo">
				                    <ul>
										<li><p><strong>${member.courseCount}</strong> <small>課程</small></p></li>
										<li><p><strong>${member.designCount}</strong> <small>作品</small></p></li>
										<li><p><strong>${member.fansCount}</strong> <small>粉絲</small></p></li>
									</ul>
								</div>
								<div class="editaboutmeleftnavfour">
									<h5>我的連結</h5>
									<ul>
										<li>
											<img alt="fb2" src="images/fb2.png"  class="editmemberfb">
											<input type="text" class="txt" name="facebook" placeholder="http://" maxlength="100" value="${member.facebook}">
										</li>
										<li>
											<img alt="google2" src="images/google2.png"  class="editmembergoogle">
											<input type="text" class="txt" name="google" placeholder="http://" maxlength="100" value="${member.google}">
										</li>
										<li>
											<img alt="pinterest2" src="images/pinterestwhite.png"  class="editmemberpinterest">
											<input type="text" class="txt" name="pinterest" placeholder="http://" maxlength="100" value="${member.pinterest}">
										</li>
									</ul>
								</div>
		                    </div><!-- aboutmeleftnav -->
		                    
		                    <div class="aboutmerightnav clearfix">
		                    	<div class="headline"><h4>關於我</h4></div>
		                    	<textarea class="ckeditor" name="content">${member.content}</textarea>
		                    </div><!-- aboutmerightnav -->
	                    </form>
					</div><!-- memberaboutme -->
				</div><!-- zone2 -->
			</div><!-- zoneAll -->	
		</div><!--content -->
		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	
	<!-- import jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
    <!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
	<script src="js/listscreen.js"></script>	
	<script src="js/ourjquery.js"></script>	
	<!-- ckeditor -->
  	<script src="ckeditor/ckeditor.js"></script>
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>   
    <!-- preview image -->
    <script src="js/previewimg.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	
    <script type="text/javascript">
        $(function() {
        	var oldImage = $("#preview").attr("src");
        	$('nav#menu').mmenu();
        	
        	$('#sendForm').submit(function(){
                $('textarea.ckeditor').each(function () {
                   var $textarea = $(this);
                   $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
                });
            });
        	$("#sendForm").validate({
    			rules:{
    				name:"required",
    				photo:{
    					extension:"jpg|png|jpeg|gif",
        				filesize:1048576
    				}
    			},
    			messages:{
    				name:{
    					required:"請填寫名稱"
    				},
    				photo:{
    					extension:"檔案格式錯誤",
        				filesize:"圖片大小上限為1MB"
    				}
    			},
				errorPlacement: function (error, element) {
	    	    	error.insertAfter(element);
	    	    },
	    	    invalidHandler: function(event, validator) {
	    	    	$(".send").attr("disabled", false);
	    	    },
				ignore: ''
    		});
        	
        	$(".send").click(function(){
        		$(".send").attr("disabled", true);
    			$("#sendForm").submit();
    		});
    		$("#photo").change(function(){
    			if($(this).val() != ""){
        			previewImage(this,$("#preview"),oldImage);
        			$("#reuploadimg").css("display","inline");
        			$("#preview").css("display","inline");
        			$("#uploadimg").css("display","none");
    			}
    			else{
    				$("#reuploadimg").css("display","none");
        			$("#preview").css("display","none");
        			$("#uploadimg").css("display","inline");
    			}
        	});
        });
    </script>
	
	<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
    <script type="text/javascript">
        $(function() {
            $('nav.primary .rightnav').mobileMenu();
            
        });
     </script>
     
     
</body>
</html>